<template>
	<div class="lesson-content">
		<div class="breadcrumb">
			<i class="breadcrumb-icon"></i>
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
				<el-breadcrumb-item><a href="/">视频学习</a></el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="lesson-form">
			<el-form :inline="true" :model="params" class="demo-form-inline">
				<el-form-item label="方向">
					<el-select size="small" v-model="params.tagId" placeholder="方向" @change="selectChange">
						<el-option v-for="item in tags" :label="item.dictLabel" :value="item.dictValue"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="难度">
					<el-select size="small" v-model="params.difficulty" placeholder="难度" @change="selectChange">
						<el-option label="全部" value=""></el-option>
						<el-option label="入门" value="入门"></el-option>
						<el-option label="初级" value="初级"></el-option>
						<el-option label="中级" value="中级"></el-option>
						<el-option label="高级" value="高级"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="热门">
					<el-select @change="selectChange" size="small" v-model="params.orderby" placeholder="热门">
						<el-option label="最新" value="最新"></el-option>
						<el-option label="最热" value="最热"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div class="search">
				<el-input placeholder="请输入关键字检索" suffix-icon="el-icon-search" v-model="params.searchStr"
					@keyup.enter.native="getLessons">
				</el-input>
				</el-input>
			</div>
		</div>
		<div class="lesson-list" v-if="lessonList.length !=0">
			<div class="lesson-item" @click="goVideo('/VideoIntro', {lessonId: item.lessonId})" v-for="item in lessonList">
				<div class="lesson-img">
					<div class="lesson-tags">
						<div class="lesson-tag lesson-tag-search">信息检索</div>
						<div class="lesson-tag lesson-type-cost">公益</div>
					</div>
					<el-image style="width: 100%; height: 100%" :src="item.logoUrl" fit="cover">
						<div slot="error" class="image-slot">
							<img src="../assets/img/no_img.png" alt="" />
						</div>
					</el-image>
				</div>
				<div class="lesson-cont">
					<div class="lesson-title">{{item.lessonName}}</div>
					<div class="lesson-initro">
						<div class="lesson-types">
							<div class="types-item">实战</div>
							<div class="types-item">中级</div>
							<div class="types-item">
								<i class="el-icon-user-solid"></i>
								<span>{{item.likeNum}}</span>
							</div>
						</div>
						<div class="lesson-star">
							<el-rate v-model="item.commentNum"></el-rate>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="page-cont">
			<el-pagination :page-size="pageSize" :hide-on-single-page="true" background layout="prev, pager, next"
				:total="total" @current-change="pageNumChange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import {
		getLessonCategoryApi,
		getLessonListApi
	} from '@/api/Lesson'
	export default {
		data() {
			return {
				typeId: this.$route.query.id,
				params: {
					tagId: '',
					searchStr: '',
					difficulty: '',
					orderby: ''
				},
				pageSize: 10,
				pageNum: 1,
				total: 0,
				searchStr: '',
				tags: [],
				lessonList: []
			}
		},
		created() {
			this.getTag()
			this.getLessons()
		},
		methods: {
			pageNumChange(index) {
				this.pageNum = index
				this.getLessons()
			},
			selectChange() {
				this.pageNum = 1
				this.getLessons()
			},
			getLessons() {
				let obj = this.params
				obj.menuid = this.typeId
				getLessonListApi(obj).then(res => {
					this.lessonList = res.rows
					this.total = res.total
				})
			},
			getTag() {
				getLessonCategoryApi().then(res => {
					let obj = [{
						dictLabel: '全部',
						dictValue: ''
					}]
					this.tags = [...obj, ...res.data]
				})
			},
			goVideo(url, query) {
				this.$router.push({
					path: url,
					query: query
				})
			}
		},
		watch: {
			//监听路由地址的改变
			$route: {
				immediate: true,
				handler() {
					this.typeId = this.$route.query.id
					this.pageNum = 1
					this.searchStr = ''
					this.getTag()
					this.getLessons()
				}
			}
		}
	}
</script>

<style lang="less">
	@contWidth: 1280px;

	.lesson-content {
		// padding-top: 60px;
		width: @contWidth;
		margin: 0 auto;
		min-height: calc(100vh - 120px);

		.breadcrumb {
			height: 42px;
			display: flex;
			align-items: center;
		}

		.breadcrumb-icon {
			width: 20px;
			height: 20px;
			margin-right: 8px;
			background: url(../assets/img/crumb_icon.png);
			background-size: 100% 100%;
		}

		.is-link {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.lesson-form {
			display: flex;
			justify-content: space-between;
			padding: 20px 37px;
			background: #F4F8FF;
			margin-bottom: 26px;
		}

		.el-form-item {
			margin-bottom: 0;
		}

		.el-form-item__content {
			width: 150px;
		}

		.search {
			.el-input__inner {
				border-radius: 18px;
				width: 295px;
				height: 36px;
			}
		}

		.lesson-list {
			display: flex;
			flex-wrap: wrap;
		}

		.lesson-item {
			width: 244px;
			cursor: pointer;

			&:not(:nth-of-type(5n)) {
				margin-right: 15px;
			}

		}

		.lesson-img {
			position: relative;
			height: 145px;
			border-radius: 6px;
			overflow: hidden;
		}

		.lesson-tags {
			position: absolute;
			z-index: 99;
			top: 9px;
			left: 0;
			width: 100%;
			padding: 0 6px;
			display: flex;
			justify-content: flex-end;
		}

		.lesson-tag {
			padding: 2px 3px;
			margin: 0 2px;
			font-size: 9px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
		}

		.lesson-tag-search {
			background: #C8C8C8;
			color: #000;
		}

		.lesson-type-cost {
			color: #E02020;
			background: #FFA9A9;
		}

		.lesson-cont {
			padding: 13px 8px;
		}

		.lesson-title {
			width: 100%;
			font-size: 13px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
			line-height: 18px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			margin-bottom: 12px;
		}

		.lesson-initro {
			display: flex;
			justify-content: space-between;
		}

		.lesson-types {
			display: flex;
			align-items: center;
		}

		.types-item {
			margin-right: 12px;
			display: flex;
			align-items: center;
			font-size: 11px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #999999;
		}

		.el-rate__icon {
			margin-right: 0px;
		}

		.page-cont {
			padding: 84px 0 110px;
			display: flex;
			justify-content: center;
		}

		.el-pagination.is-background .el-pager li:not(.disabled).active {
			background-color: #2360FE;
		}
	}
</style>